<%@ page import="work.comeback.service.imp.MovieServiceImpl" %>
<%@ page import="java.util.List" %>
<%@ page import="java.util.Map" %>
<%@ page import="work.comeback.dao.movie.IMovieDetail" %>
<%@ page import="work.comeback.model.movie.detail.MovieDetailData" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ page contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" %>

<!DOCTYPE html>
<html lang="en" data-theme="dark">
<head>
    <jsp:include page="/include_all.jsp"/>
    <script src="assets/js/custom/modal-login.js"></script>
    <title>${applicationScope.appTitle}</title>
</head>
<body>

<%
    IMovieDetail movieDetail = (new MovieServiceImpl()).getMovieDetail();
    Map<String, List<MovieDetailData>> groupedDataByTypeName = movieDetail.getGroupedDataByTypeName(200);
    request.setAttribute("movieInfoGroupedByTypeName", groupedDataByTypeName);
%>

<div class="min-h-screen flex flex-col bg-base-200">
    <jsp:include page="/include/common/header/web_header.jsp" flush="true"/>

    <div class="container mx-auto px-4">
        <!-- Hero Carousel -->
        <div class="carousel w-full rounded-box my-4 h-[400px] overflow-hidden">
            <div id="slide1" class="carousel-item relative w-full">
                <img src="https://obs.gduamoe.com/upload/banner/20241208-1/9e0e0d07ec38b68740855fe575a0d373.png?x-image-process=image/quality,q_65/format,webp"
                     class="w-full object-cover"/>
                <div class="absolute inset-0 bg-gradient-to-t from-black/60 to-transparent">
                    <div class="absolute bottom-0 left-0 p-8">
                        <h2 class="text-3xl font-bold text-white mb-2">清明上河图密码</h2>
                        <p class="text-white/80">更新至20集</p>
                    </div>
                </div>
                <div class="absolute flex justify-between transform -translate-y-1/2 left-5 right-5 top-1/2">
                    <a href="#slide4" class="btn btn-circle">❮</a>
                    <a href="#slide2" class="btn btn-circle">❯</a>
                </div>
            </div>
            <div id="slide2" class="carousel-item relative w-full">
                <img src="https://obs.gduamoe.com/upload/banner/20241211-1/73ded3fda3679a565fff550da62ad74f.png?x-image-process=image/quality,q_65/format,webp"
                     class="w-full object-cover"/>
                <div class="absolute inset-0 bg-gradient-to-t from-black/60 to-transparent">
                    <div class="absolute bottom-0 left-0 p-8">
                        <h2 class="text-3xl font-bold text-white mb-2">猎罪图鉴2</h2>
                        <p class="text-white/80">全新上线</p>
                    </div>
                </div>
                <div class="absolute flex justify-between transform -translate-y-1/2 left-5 right-5 top-1/2">
                    <a href="#slide1" class="btn btn-circle">❮</a>
                    <a href="#slide3" class="btn btn-circle">❯</a>
                </div>
            </div>
        </div>
    </div>

    <div class="flex-1 flex mt-[6rem] relative">
        <main class="flex-grow overflow-y-auto">
            <div class="movie-layout h-full">
                <c:forEach var="entry" items="${movieInfoGroupedByTypeName}">
                    <h3 class="text-xl font-semibold mb-4">${entry.key}</h3>
                    <c:forEach var="movies" items="${entry.value}">
                        <c:set value="${movies}" var="movie" scope="request"/>
                        <article class="movie-card">
                            <div class="relative h-64 rounded-lg bg-gray-200"
                                 style="background-image: url('${movie.vodPic}'); background-size: cover; background-position: center;">
                                <span class="absolute bottom-0 right-0 rounded bg-black px-2 py-1 text-white">${movie.vodRemarks}</span>
                            </div>
                            <div class="mt-2 flex justify-center">
                                <a href="#" class="gotoDetail text-xl text-black"
                                   data-movie-id="${movie.vodId}">${movie.vodName}</a>
                            </div>
                        </article>
                    </c:forEach>
                </c:forEach>
            </div>
        </main>
    </div>

    <jsp:include page="/include/common/footer/footer_bar.jsp"/>
    <jsp:include page="/include/common/display/hover_theme_controller.jsp"/>
</div>

<script>
    $(document).ready(function () {
        $('.gotoDetail').on('click', function (e) {
            e.preventDefault();
            const movieId = $(this).data('movie-id');
            window.location.href = "${ctx}/api/movie/detail?movieId=" + movieId;
        });
    });
</script>
</body>
</html>
